<template>
	<view class="wrap">
		<view class="t-header app_gHeaderFixed">
			<g-header :title="cName" rtype="search" :hideRight="true"></g-header>
			<view class="filter u-flex">
				<view class="filter-item u-flex-1 app_flex-aicjcc">
					<text class="app_arrow" :class="{active: filterType == 'date'}"
						@click="showDatePicker = true">{{dateObj.dateTypeName}}</text>
				</view>
				<!-- <view class="filter-item u-flex-1 app_flex-aicjcc">
					<text class="app_arrow" :class="{active: filterType == 'type'}"
						@click="showCategory = true">产品筛选</text>
				</view> -->
			</view>
		</view>
		<view class="box-main">
			<view class="box-main_top app_flex">
				<view class="diagram">
					<!-- <image src="../../static/images/data-2.png"></image> -->
					<qiun-data-charts type="ring" :opts="copts" :chartData="c1data" />
				</view>
				<view class="data">
					<view class="data2-item">
						<text>总销售量</text>
						<text>{{productSalesInfo.total}}</text>
					</view>
					<view class="data2-item" v-for="(item, index) in productSalesInfo.details" :key="index">
						<text>{{item.strip}}</text>
						<text>{{item.amount ? item.amount : '--'}}</text>
					</view>
				</view>
			</view>
			<view class="box-main_bottom u-flex" v-if="productSalesInfo.categoryTotals">
				<view class="data2" v-for="(item, index) in productSalesInfo.categoryTotals">
					<view class="data2-item dot blue"
						@click="onSkipTap('productSaleOverview-moreMore', index)">
						<text>{{item.cname}}</text>
						<text>{{item.proportion}} </text>
						<text>共{{item.totalHorse}}</text>
					</view>
					<view class="data2-item" v-for="(val, idx) in item.details">
						<text style="display:inline-block;min-width: 80rpx;">{{val.strip}}</text>
						<text>{{val.amount ? val.amount : '--'}}</text>
					</view>
				</view>
			</view>
		</view>
		<g-time-picker :show="showDatePicker" @change="onTimePickerFlagChange" @dateChange="onPickerDateChange">
		</g-time-picker>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const initBeginDate = new Date(year, month - 1, day - 7 + 1).Format('yyyy-MM-dd')
			const copts = {
				timing: "easeOut",
				duration: 1000,
				rotate: false,
				rotateLock: false,
				color: ["#4C88FF", "#FF6666", "#FAC858", "#91CB74", "#73C0DE", "#3CA272", "#9A60B4",
					"#ea7ccc", "#ea7ccc"
				],
				padding: [0, 0, 0, 0],
				fontSize: 13,
				fontColor: "#666666",
				dataLabel: false,
				dataPointShape: false,
				dataPointShapeType: "solid",
				touchMoveLimit: 60,
				enableScroll: false,
				enableMarkLine: false,
				legend: {
					show: false
				},
				title: {
					name: ""
				},
				subtitle: {
					name: ""
				},
				extra: {
					ring: {
						ringWidth: 20,
						border: false
					},
					tooltip: {
						fontSize: 6
					}
				}
			}
			return {
				cName: '布导航',
				categoryId: '',
				filterType: 'none',
				showDatePicker: false,
				showCategory: false,
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				dateObj: {
					beginDate: '1980-01-01',
					endDate: date.Format('yyyy-MM-dd'),
					dateType: 0, // 1:近七天，2:近两周，3:近三周，4:近一月，0:自定义
					dateTypeName: '全部'
				},
				list: [],
				productSalesInfo: {
					categoryTotals: null,
					details: null,
					productList: null,
					proportionData: null,
					total: null
				},
				productTypeId: '',
				typeList: [],
				activeTypeIndex: 0,
				typeListChildren: [],
				copts,
				c1data: {}
			}
		},
		onLoad(options) {
			this.categoryId = options.id
			this.cName = options.cname
			uni.setNavigationBarTitle({
				title: options.cname || '布导航'
			})
			this.updatePage()
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		methods: {
			updatePage() {
				this.getSalesDataProductCategory()
			},
			getSalesDataProductCategory() {
				this.$g_api.salesDataProductCategory({
					beginTime: this.dateObj.beginDate,
					dateType: this.dateObj.dateType,
					endTime: this.dateObj.endDate,
					category: this.categoryId
				}).then(({
					data
				}) => {
					if (data && data.proportionData && data.proportionData.length > 0) {
						let seriesData = []
						data.proportionData.forEach(item => {
							seriesData.push({
								name: item.typeTitle,
								value: Number(item.horse)
							})
						})
						this.c1data = JSON.parse(JSON.stringify({
							series: [{
								data: seriesData
							}]
						}))
					} else {
						this.c1data = JSON.parse(JSON.stringify({
							series: [{
								data: [{
									name: '无数据',
									value: 0
								}]
							}]
						}))
					}
					this.productSalesInfo = data
				})
			},
			onTimePickerFlagChange(val) {
				this.showDatePicker = val
			},
			onPickerDateChange({
				beginDate,
				endDate,
				dateType,
				dateTypeName
			}) {
				this.dateObj.beginDate = beginDate
				this.dateObj.endDate = endDate
				this.dateObj.dateType = dateType
				this.dateObj.dateTypeName = dateTypeName
				this.updatePage()
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx + 90rpx)
	}

	.filter {
		background-color: #fff;
	}

	.filter-item {
		height: 90rpx;

		text {
			font-size: 26rpx;
		}

		.app_arrow {
			&::after {
				right: 0rpx;
				transition: all 0.3s;
				transform: translateY(-70%) rotate(135deg);
			}

			&.active {
				&::after {
					transform: translateY(-10%) rotate(-45deg);
				}
			}
		}
	}

	.box-main {
		padding: 30rpx 30rpx 40rpx 50rpx;
		background-color: #fff;
	}

	.box-main_top {}

	.box-main_bottom {
		margin-top: 40rpx;
	}

	.diagram {
		width: 240rpx;
		height: 240rpx;
		padding-left: 30rpx;
		flex-shrink: 0;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.data {
		margin-left: 90rpx;
	}

	.data2 {
		margin-left: 40rpx;
		margin-bottom: 30rpx;

		&:nth-child(2n) {
			margin-left: 90rpx;
		}
	}

	.data2-item {
		margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #888;

		&:nth-child(1) {
			color: #333;
		}

		text {
			margin-right: 16rpx;
		}

		&.app_arrow {
			&::after {
				right: 30rpx;
			}
		}
	}

	.box-main_bottom {
		flex-wrap: wrap;
	}

	.dot {
		position: relative;

		&::before {
			position: absolute;
			left: -30rpx;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: #4C88FF;
			border-radius: 8rpx;
		}

		&.blue {
			&::before {
				background-color: #4c88ff;
			}
		}

		&.yellow {
			&::before {
				background-color: #FFE566;
			}
		}

		&.green {
			&::before {
				background-color: #3DCC6D;
			}
		}
	}
</style>
